<template>
  <n-grid :item-responsive="true" :x-gap="16" :y-gap="16">
    <n-grid-item span="0:24 640:24 1024:24">
      <n-space :vertical="true" :size="16">
        <n-card title="❤️ 我的收藏" :bordered="false" size="small" class="shadow-sm rounded-16px">
          <template #header-extra>
            <n-gradient-text type="info">激活标签页，右键点击"添加收藏"</n-gradient-text>
          </template>
          <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
            <n-grid-item v-for="item in favoriteMenus" :key="item.menuname">
              <technology-card v-bind="item" />
            </n-grid-item>
          </n-grid>
        </n-card>
      </n-space>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useAuthStore } from '@/store';
import { fetchFavoriteMenuList } from '@/service/api/admin';
import { TechnologyCard } from './components';

defineOptions({ name: 'DashboardWorkbenchMain' });

const favoriteMenus = ref<Admin.Menu[]>([]);

const getMyFavoriteMeny = async () => {
  const auth = useAuthStore();
  const result = await fetchFavoriteMenuList(auth.userInfo.userId, 'REPORT');
  if (result.data) {
    favoriteMenus.value = result.data;
  }
};

onMounted(async () => {
  getMyFavoriteMeny();
});
</script>

<style scoped></style>
